<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">订单详情</div>
    </v-ons-toolbar>
    <div class="container">
      <div class="info-group">
        <div class="user">
          <div class="left">
            <img src="../../assets/resource/consumer/user/face.jpg" alt="">
          </div>
          <div class="center">
            <span>用户名称</span>
            <img src="../../assets/resource/service/order_detail/grade0.png" alt="">
          </div>
          <div class="right">
            <img src="../../assets/resource/service/order_detail/phone-icon.png" alt="">
          </div>
        </div>
        <div class="order-info-group">
          <div class="order-info-item">
            <p>2.0 km</p>
            <p>订单距离您</p>
          </div>
          <div class="order-info-item">
            <p class="danger">30元</p>
            <p>服务费(不含商品费)</p>
          </div>
        </div>
      </div>

      <div class="info-group">
        <div class="address">
          <div class="address-item">
            <div class="left">
              <img class="address-icon" src="../../assets/resource/service/order_detail/address-icon1.png" alt="">
            </div>
            <div class="right">
              <p>地址1</p>
            </div>
          </div>
          <div class="address-item">
            <div class="left">
              <img class="address-excision" src="../../assets/resource/service/order_detail/address-icon3.png" alt="">
            </div>
            <div class="right">
              <p>里程约3.5km</p>
            </div>
          </div>
          <div class="address-item">
            <div class="left">
              <img class="address-icon" src="../../assets/resource/service/order_detail/address-icon2.png" alt="">
            </div>
            <div class="right">
              <p>地址1</p>
            </div>
          </div>
        </div>
      </div>

      <div class="info-group">
        <div class="detail">
          <div class="detail-item">
            <div class="side">订单状态</div>
            <div class="danger">
              未完成
            </div>
          </div>
          <div class="detail-item">
            <div class="side">订单号码</div>
            <div>
              123456
            </div>
          </div>
          <div class="detail-item">
            <div class="side">服务时间</div>
            <div>
              2018-7-30 00:00:00
            </div>
          </div>
          <div class="detail-item">
            <div class="side">订单内容</div>
            <div>
              送外卖送外卖
            </div>
          </div>
          <div class="detail-item">
            <div class="side">商品语音</div>
            <div>
              <div class="audio">
                <i class="fa fa-rss"></i>
                <span>10 "</span>
              </div>
            </div>
          </div>
          <div class="detail-item">
            <div class="side">商品图片</div>
            <div class="img-wrap">
              <img class="img" src="../../assets/resource/consumer/user/face.jpg" alt="">
            </div>
          </div>
          <div class="detail-item">
            <div class="side">订单备注</div>
            <div>
              无
            </div>
          </div>
          <div class="detail-item">
            <div class="side">订单状态</div>
            <div>
              已完成
            </div>
          </div>
        </div>
      </div>

      <div class="tabbar-bottom">
        <button @click="enterPage({path:'/ServiceLocationsDetail'})">查看路线</button>
      </div>
    </div>
  </v-ons-page>
</template>

<script>
  export default {
    methods: {
      enterPage({path: path}) {
        this.$router.push({
          path: path
        });
      }
    },
    mounted() {
      let map = new qq.maps.Map(document.getElementById("wx-map"), {
        zoom: 14,
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoomControl: false,
        mapTypeControl: false,
      });
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/order-detail.less";
</style>
